<template>
  <view class="news-section" :style="[sectionCss]">
    <view class="news-tabs">
      <view class="tab-bg" :style="[tabBg]"></view>
      <view class="tab-content">
        <view
          class="tab-item"
          v-for="(item, index) in topicTabs"
          :key="index"
          @click="tabChange(index)"
        >
          <view
            class="tab-name"
            :style="[current == index ? tabActiveCss : '']"
            :class="
              current == index && tabActiveType == 'radius'
                ? 'tab-name-radius'
                : ''
            "
            >{{ item.name }}</view
          >
          <view
            class="active-tab"
            v-if="tabActiveType == 'line'"
            :class="current == index ? 'tab-show' : ''"
            :style="{ backgroundColor: activeLineColor }"
          ></view>
        </view>
      </view>
    </view>
    <view class="card-list" v-if="listData.length">
      <view
        class="card-list-item"
        v-for="(item, index) in listData"
        :key="index"
        @click="topicSkip(item.id)"
      >
        <view
          class="flex-line"
          :class="
            (index == 1 && listData.length == 2) ||
            (index == 0 && listData.length == 1)
              ? 'no-bottom'
              : ''
          "
          v-if="index <= 1"
        >
          <view class="topic-info">
            <view class="topic-title">{{ item.title }}</view>
            <view class="topic-msg">
              <text>{{ item.addtime | formateTime }}</text>
              <text>{{ item.read_count }}</text>
            </view>
          </view>
          <view class="topic-banner">
            <image lazy-load :src="item.cover_pic" mode="" />
          </view>
        </view>
        <view
          class="flex-column"
          :class="listData.length == index + 1 ? 'no-bottom' : ''"
          v-if="index > 1"
        >
          <view class="topic-title">{{ item.title }}</view>
          <view class="topic-banner">
            <image lazy-load :src="item.cover_pic" mode="" />
          </view>
          <view class="topic-msg">
            <text>{{ item.addtime | formateTime }}</text>
            <text>{{ item.read_count }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { diyMixin } from "../../mixins/diy";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    listData: {
      type: Array,
      default: [],
    },
    topicTabs: {
      type: Array,
      default: [],
    },
  },
  mixins: [diyMixin], //混入文件
  data() {
    return {
      current: 0,
    };
  },
  filters: {
    formateTime(val) {
      if (!val) return "";
      let date = new Date(val * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      let f = date.getMinutes();
      let s = date.getSeconds();
      return `${y}-${m}-${d}`;
    },
  },
  computed: {
    tabBg() {
      let style = Object.assign({}, this.propsData.params.tab);
      if (
        this.propsData.params.tab.backgroundColor &&
        this.propsData.params.tab.opacity
      ) {
        delete style.opacity;
      }
      return style;
    },
    sectionCss() {
      if (this.outModuleCss?.borderRadius) {
        return {
          borderRadius: this.outModuleCss.borderRadius,
          overflow: "hidden",
        };
      } else {
        return "";
      }
    },
    tabActiveCss() {
      let style = this.propsData.params.tabItem.fontCss;
      if (style?.fontNum) {
        style.fontSize = `${style.fontNum * 2}rpx`;
      }
      if (this.tabActiveType == "radius") {
        style["backgroundColor"] = this.propsData.params.tabItem.borderColor;
      }
      return style;
    },
    activeLineColor() {
      return this.propsData.params.tabItem.borderColor || "";
    },
    tabActiveType() {
      return this.propsData.params.tabItem.borderType || "line";
    },
  },
  methods: {
    topicSkip(e) {
      uni.navigateTo({
        url: "/other/special/topic?id=" + e,
      });
    },
    tabChange(e) {
      this.current = e;
      this.$emit("tabChange", { item: this.topicTabs[e] });
    },
  },
};
</script>

<style scoped lang="scss">
.news-section {
  width: 100%;
  .news-tabs {
    width: 100%;
    height: 88rpx;
    position: relative;
    padding: 0 3.2vw;
    .tab-bg {
      width: 100%;
      height: 100%;
      z-index: -1;
      position: absolute;
      left: 0;
      top: 0;
    }
    .tab-content {
      width: 100%;
      height: 88rpx;
      display: flex;
      align-items: center;
      overflow-y: hidden;
      overflow-x: scroll;
    }
    .tab-content::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
    .tab-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      margin-right: 4.53%;
      flex-shrink: 0;
      .tab-name {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        margin-bottom: 6rpx;
      }
      .tab-name-radius {
        padding: 2rpx 16rpx;
        height: 6.4vw;
        line-height: 6.4vw;
        border-radius: 3.2vw;
        background-color: #ff0000;
      }
      .active-tab {
        width: 100%;
        height: 4rpx;
        background-color: #ff0000;
        opacity: 0;
      }
      .tab-show {
        opacity: 1;
      }
    }
    .tab-item:last-child {
      margin-right: 0;
    }
  }

  .card-list {
    width: 100%;
    padding: 2.67vw 3.2vw 0 3.2vw;
    .card-list-item {
      width: 100%;
      .flex-line {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-bottom: 2.67vw;
        border-bottom: 1px solid #dbdbdb;
        margin-bottom: 2.67vw;
        .topic-banner {
          width: 28.8%;
          height: 22.67vw;
          border-radius: 1.067%;
          flex-shrink: 0;
          image {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 1.067%;
          }
        }
        .topic-info {
          width: 64.8%;
          min-height: 22.67vw;
          margin-right: 7.2%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .topic-title {
            font-size: 4.26vw;
            font-family: PingFang SC;
            font-weight: 800;
            color: #000000;
            width: 100%;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 这里是超出几行省略 */
            overflow: hidden;
          }
          .topic-msg {
            width: 57.6%;
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text:last-child {
              margin-left: 3.2vw;
            }
          }
        }
      }

      .flex-column {
        width: 100%;
        padding-bottom: 3.2vw;
        margin-bottom: 2.67vw;
        border-bottom: 1px solid #dbdbdb;
        .topic-title {
          font-size: 4.26vw;
          font-family: PingFang SC;
          font-weight: 800;
          color: #000000;
          width: 100%;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          overflow: hidden;
          margin-bottom: 2.93vw;
        }
        .topic-banner {
          width: 100%;
          height: 48vw;
          image {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .topic-msg {
          display: flex;
          align-items: center;
          margin-top: 2.67vw;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #999999;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text:last-child {
            margin-left: 3.2vw;
          }
        }
      }
      .no-bottom {
        border-bottom: 0;
        margin-bottom: 0;
      }
    }
  }
}
</style>
